<template>
    <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
            <el-input v-model="form.name" autofocus />
        </el-form-item>
        <el-form-item label="登录名">
            <el-input v-model="form.loginName" />
        </el-form-item>
        <el-form-item label="密码" v-if="form.id == ''">
            <el-input v-model="form.pwd" type="password" show-password />
        </el-form-item>
        <el-form-item label="当前状态">
            <el-switch v-model="form.state" inline-prompt active-value="1" active-text="正常" inactive-value="9"
                inactive-text="冻结" />
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>

import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { encrypt } from '~/util/crypto'

/**
 * 编辑表单的内容
 */
const form = reactive({
    id: '',
    name: '',
    loginName: '',
    pwd: '',
    state: '1'
})

// 声明传入参数，editOpt：操作控制命令，包括type和data两个属性
const props = defineProps(['editOpt'])

onMounted(() => {
    if (props.editOpt.type = 'modify') {
        for (let key in props.editOpt.data) {
            //console.log(key + ":" + props.editOpt.data[key])
            form[key] = props.editOpt.data[key];
        }
    }else{
        // 清空数据
        for (let key in form) {
            form[key] = null;
        }
    }
})

/**
 * 用户单击确定按钮后，List页面将触发事件，调用本方法处理业务逻辑 
 */
const confirm = (successCallback: any) => {

    let saveParm = {};
    for (let key in form) {
        saveParm[key] = form[key];
    }
    saveParm.pwd = encrypt(form.pwd);  // 对密码进行单独处理（密码需首先经过前端加密）

    axios.post("api/system/user/save", saveParm).then(res => {
        if (res.data.code == "200") {
            //请添加执行成功后的业务代码 
            ElMessage.success('保存成功')
            successCallback();
        } else {
            // 错误消息为：res.data.msg 
            // 请添加执行失败后的业务代码 
            ElMessage.error(res.data.msg)
        }
    });
}

/**
 *
 * 用户单击取消按钮后，List页面将触发事件，调用本方法处理关闭业务逻辑，若不声明则将直接关闭
const beforClose = (successCallback:any) => {
    console.log('此处可处理关闭前的业务逻辑');
    successCallback();
}
*/
defineExpose({ confirm })

</script>
